<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>必看 | Hexo博客搭建超级指南 | Justlovesmile's BLOG</title><meta name="keywords" content="前端,Hexo,博客"><meta name="author" content="Justlovesmile,865717150@qq.com"><meta name="copyright" content="Justlovesmile"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="Hexo博客搭建全过程，环境部署，Hexo基础命令，域名设置，CDN图床，博客魔改，页脚养鱼，前端禁止右键等等..."><meta property="og:type" content="article"><meta property="og:title" content="必看 | Hexo博客搭建超级指南"><meta property="og:url" content="https://blog.justlovesmile.top/posts/c8972b63.html"><meta property="og:site_name" content="Justlovesmile&#39;s BLOG"><meta property="og:description" content="Hexo博客搭建全过程，环境部署，Hexo基础命令，域名设置，CDN图床，博客魔改，页脚养鱼，前端禁止右键等等..."><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715201402.png"><meta property="article:published_time" content="2020-07-15T12:04:21.000Z"><meta property="article:modified_time" content="2021-08-14T04:33:26.000Z"><meta property="article:author" content="Justlovesmile"><meta property="article:tag" content="前端"><meta property="article:tag" content="Hexo"><meta property="article:tag" content="博客"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715201402.png"><link rel="shortcut icon" href="/img/logo.jpg"><link rel="canonical" href="https://blog.justlovesmile.top/posts/c8972b63"><link rel="preconnect" href="//cdn.jsdelivr.net"><link rel="preconnect" href="//hm.baidu.com"><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload='this.media="all"'><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" media="print" onload='this.media="all"'><script>var _hmt=_hmt||[];!function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?a2ee893562999ebad688b0d82daa100a";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}()</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/font/family=Titillium+Web.css" media="print" onload='this.media="all"'><script>const GLOBAL_CONFIG={root:"/",algolia:void 0,localSearch:{path:"search.xml",languages:{hits_empty:"找不到您查询的内容：${query}"}},translate:void 0,noticeOutdate:void 0,highlight:{plugin:"highlighjs",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:400},copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},relativeDate:{homepage:!1,post:!1},runtime:"天",date_suffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:{limitCount:100,languages:{author:"作者: Justlovesmile",link:"链接: ",source:"来源: Justlovesmile's BLOG",info:"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},lightbox:"fancybox",Snackbar:{chs_to_cht:"你已切换为繁体",cht_to_chs:"你已切换为简体",day_to_night:"你已切换为深色模式",night_to_day:"你已切换为浅色模式",bgLight:"var(--mj-card-bg)",bgDark:"var(--mj-card-bg)",position:"top-right"},source:{justifiedGallery:{js:"https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.js",css:"https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.css"}},isPhotoFigcaption:!1,islazyload:!0,isAnchor:!1}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={title:"必看 | Hexo博客搭建超级指南",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2021-08-14 12:33:26"}</script><noscript><style>#nav{opacity:1}.justified-gallery img{opacity:1}#post-meta time,#recent-posts time{display:inline!important}</style></noscript><script>(e=>{e.saveToLocal={set:function(e,t,o){if(0===o)return;const a=864e5*o,n={value:t,expiry:(new Date).getTime()+a};localStorage.setItem(e,JSON.stringify(n))},get:function(e){const t=localStorage.getItem(e);if(!t)return;const o=JSON.parse(t);if(!((new Date).getTime()>o.expiry))return o.value;localStorage.removeItem(e)}},e.getScript=e=>new Promise((t,o)=>{const a=document.createElement("script");a.src=e,a.async=!0,a.onerror=o,a.onload=a.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(a.onload=a.onreadystatechange=null,t())},document.head.appendChild(a)}),e.activateDarkMode=function(){document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")},e.activateLightMode=function(){document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#ffffff")};const t=saveToLocal.get("theme"),o=(new Date).getHours();void 0===t?o<=6||o>=18?activateDarkMode():activateLightMode():"light"===t?activateLightMode():activateDarkMode();/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="/css/justlovesmile.css"><link rel="stylesheet" href="/css/blogicon.css"><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="Justlovesmile's BLOG" type="application/atom+xml"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="" data-lazy-src="/img/avatar.jpg" onerror='onerror=null,src="/img/friend_404.gif"' alt="avatar"></div><div class="site-data is-center"><div class="data-item"><a href="/archives/"><div class="headline">文章</div><div class="length-num">75</div></a></div><div class="data-item"><a href="/tags/"><div class="headline">标签</div><div class="length-num">69</div></a></div><div class="data-item"><a href="/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div></div><hr><div class="menus_items"><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>网站</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/"><i class="fa-fw fas fa-home"></i> <span>首页</span></a></li><li><a class="site-page child" href="/guestbook/"><i class="fa-fw fas fa-pencil-alt"></i> <span>留言</span></a></li><li><a class="site-page child" href="/friends/"><i class="fa-fw fas fa-paper-plane"></i> <span>友链</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>文库</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i> <span>全部标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i> <span>全部分类</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-calendar"></i> <span>文章列表</span></a></li><li><a class="site-page child" href="/random/"><i class="fa-fw fas fa-shoe-prints"></i> <span>随便逛逛</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>实验室</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/laboratory/"><i class="fa-fw fa fa-lightbulb-o"></i> <span>项目展示</span></a></li><li><a class="site-page child" href="/fcircle/"><i class="fa-fw fa fa-puzzle-piece"></i> <span>友链订阅</span></a></li><li><a class="site-page child" href="/charts/"><i class="fa-fw fa fa-pie-chart"></i> <span>博客统计</span></a></li><li><a class="site-page child" href="/update/"><i class="fa-fw fa fa-commenting-o"></i> <span>更新日志</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>清单</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/photos/"><i class="fa-fw fas fa-camera-retro"></i> <span>相册</span></a></li><li><a class="site-page child" href="/video/"><i class="fa-fw fa fa-video-camera"></i> <span>视频</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i> <span>歌单</span></a></li><li><a class="site-page child" href="/focus/"><i class="fa-fw fa fa-check-square-o"></i> <span>关注</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>关于</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/about/"><i class="fa-fw fas fa-user"></i> <span>本站</span></a></li><li><a class="site-page child" href="/love/"><i class="fa-fw fa fa-heart"></i> <span>Love</span></a></li><li><a class="site-page child" href="/donate/"><i class="fa-fw fa fa-gratipay"></i> <span>打赏</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image:url(https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715201402.png)"><nav id="nav"><div id="nav-group"><div id="blog_name"><a id="site-name" href="/">Justlovesmile</a></div><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>网站</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/"><i class="fa-fw fas fa-home"></i> <span>首页</span></a></li><li><a class="site-page child" href="/guestbook/"><i class="fa-fw fas fa-pencil-alt"></i> <span>留言</span></a></li><li><a class="site-page child" href="/friends/"><i class="fa-fw fas fa-paper-plane"></i> <span>友链</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>文库</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i> <span>全部标签</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i> <span>全部分类</span></a></li><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-calendar"></i> <span>文章列表</span></a></li><li><a class="site-page child" href="/random/"><i class="fa-fw fas fa-shoe-prints"></i> <span>随便逛逛</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>实验室</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/laboratory/"><i class="fa-fw fa fa-lightbulb-o"></i> <span>项目展示</span></a></li><li><a class="site-page child" href="/fcircle/"><i class="fa-fw fa fa-puzzle-piece"></i> <span>友链订阅</span></a></li><li><a class="site-page child" href="/charts/"><i class="fa-fw fa fa-pie-chart"></i> <span>博客统计</span></a></li><li><a class="site-page child" href="/update/"><i class="fa-fw fa fa-commenting-o"></i> <span>更新日志</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>清单</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/photos/"><i class="fa-fw fas fa-camera-retro"></i> <span>相册</span></a></li><li><a class="site-page child" href="/video/"><i class="fa-fw fa fa-video-camera"></i> <span>视频</span></a></li><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i> <span>歌单</span></a></li><li><a class="site-page child" href="/focus/"><i class="fa-fw fa fa-check-square-o"></i> <span>关注</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><span>关于</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/about/"><i class="fa-fw fas fa-user"></i> <span>本站</span></a></li><li><a class="site-page child" href="/love/"><i class="fa-fw fa fa-heart"></i> <span>Love</span></a></li><li><a class="site-page child" href="/donate/"><i class="fa-fw fa fa-gratipay"></i> <span>打赏</span></a></li></ul></div></div></div><div id="nav-right"><div id="search-button"><a class="nav-rightbutton site-page social-icon search"><i class="fas fa-search fa-fw"></i></a></div><div id="darkmode_navswitch"><a class="nav-rightbutton site-page darkmode_switchbutton" onclick="switchDarkMode()"><i class="fas fa-adjust"></i></a></div><div id="toggle-menu"><a class="nav-rightbutton site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></div></nav><div class="coverdiv" id="coverdiv"><img class="cover entered loading" id="post-cover" alt="cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715201402.png"></div><div id="post-info"><div class="post-firstinfo" id="post-meta"><span class="post-meta-categories"><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/%E5%8D%9A%E5%AE%A2%E7%9B%B8%E5%85%B3/">博客相关</a></span><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">#前端</a><a class="post-meta__tags" href="/tags/Hexo/">#Hexo</a><a class="post-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">#博客</a></div></div><h1 class="post-title">必看 | Hexo博客搭建超级指南</h1><div id="post-meta"><div class="meta-firstline"><span class="meta-share-time"><span class="meta-avatar"><a class="meta-avatar-img" href="/about/" title="关于作者"><img alt="作者头像" src="" data-lazy-src="/img/avatar.jpg"></a><a class="meta-avatar-name" href="/about/" title="关于作者">Justlovesmile</a></span></span><span class="post-meta-date"><i class="fa-fw post-meta-icon far fa-calendar-alt"></i><span class="post-meta-label">发表于</span><time datetime="2020-07-15T12:04:21.000Z" title="发表于 2020-07-15 20:04:21">2020-07-15</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.9k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>11分钟</span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="1-引言"><a href="#1-引言" class="headerlink" title="1. 引言"></a>1. 引言</h1><p>不知不觉，我的博客已经在风雨飘摇中运行超过一年时间了，回想这一年的博客维护以及魔改经历，我觉得有必要详细记录一下博客搭建的过程，以防我不小心搞崩了博客…</p><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715162057.png"></p><h1 id="2-环境部署工作"><a href="#2-环境部署工作" class="headerlink" title="2. 环境部署工作"></a>2. 环境部署工作</h1><h2 id="2-1-安装Node-js"><a href="#2-1-安装Node-js" class="headerlink" title="2.1 安装Node.js"></a>2.1 安装Node.js</h2><p>1.进入官网选择对应的系统下载：<br>官网：<a target="_blank" rel="external nofollow noopener noreferrer" href="https://nodejs.org/en/download/">https://nodejs.org/en/download/</a><br><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715163331.png"><br>2.安装<br>选好路径，完成安装<br>3.检查<br>打开<code>cmd</code>或者<code>powershell</code>,输入:</p><figure class="highlight crmsh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">node</span> <span class="title">-v</span></span><br><span class="line">npm -v</span><br></pre></td></tr></table></figure><p>显示版本号，即安装无误</p><blockquote><p>npm为Node.js的包管理工具</p></blockquote><h2 id="2-2-安装Git"><a href="#2-2-安装Git" class="headerlink" title="2.2 安装Git"></a>2.2 安装Git</h2><p>1.进入官网下载<br>官网：<a target="_blank" rel="external nofollow noopener noreferrer" href="https://git-scm.com/downloads">https://git-scm.com/downloads</a><br>2.安装<br>选好路径，完成安装<br>3.检查<br>打开git bash，输入：</p><figure class="highlight ada"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git <span class="comment">--version</span></span><br></pre></td></tr></table></figure><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715170132.png"></p><h2 id="2-3-注册Github账号"><a href="#2-3-注册Github账号" class="headerlink" title="2.3 注册Github账号"></a>2.3 注册Github账号</h2><p>1.Github官网<a target="_blank" rel="external nofollow noopener noreferrer" href="https://github.com/">https://github.com</a>,注册账号<br>2.新建项目</p><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715171105.png"></p><p>项目名字为<code>你的昵称.github.io</code>，例如：</p><figure class="highlight reasonml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//我的昵称是Justlovesmile</span></span><br><span class="line">所以我的项目名称为<span class="module-access"><span class="module"><span class="identifier">Justlovesmile</span>.</span></span>github.io</span><br></pre></td></tr></table></figure><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715170812.png"></p><p>3.代码库设置</p><p>创建好之后，保存<code>&lt;&gt;code</code>内的SSH，即：</p><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git@github<span class="selector-class">.com</span>:XXXXXXXXX/XXXXXXXXX<span class="selector-class">.github</span><span class="selector-class">.io</span>.git</span><br></pre></td></tr></table></figure><p>点击右侧的<code>Settings</code></p><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715171759.png"></p><p>向下找到<code>Gihub pages</code>,点击<code>Launch automatic page generator</code>，<code>Github</code>将会自动替你创建出一个<code>pages</code>的页面。 如果配置没有问题，大约几分钟之后，<code>yourname.github.io</code>这个网址就可以正常访问了</p><p>5.推荐开启强制使用https</p><h2 id="2-4-安装Hexo"><a href="#2-4-安装Hexo" class="headerlink" title="2.4 安装Hexo"></a>2.4 安装Hexo</h2><p>1.在合适的位置，如<code>E:/hexo</code>，安装<code>hexo-cli</code>,输入：</p><figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd <span class="regexp">/e/</span>hexo/</span><br><span class="line">npm install hexo-cli -g</span><br></pre></td></tr></table></figure><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715172419.png"></p><p>再安装<code>hexo</code></p><figure class="highlight ada"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo <span class="comment">--save</span></span><br></pre></td></tr></table></figure><p>安装完成后，检查</p><figure class="highlight ebnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">hexo -v</span></span><br></pre></td></tr></table></figure><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715172614.png"></p><p>2.初始化一个文件夹：</p><figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">cd <span class="regexp">/e/</span>hexo/</span><br><span class="line">hexo init</span><br><span class="line">npm install</span><br></pre></td></tr></table></figure><p>3.生成Hexo页面：</p><figure class="highlight ebnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">hexo g</span></span><br></pre></td></tr></table></figure><p>4.启动服务：</p><figure class="highlight ebnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">hexo s</span></span><br></pre></td></tr></table></figure><p>默认是<code>localhost:4000</code>，打开浏览器输入即可</p><h2 id="2-5-推送到Github"><a href="#2-5-推送到Github" class="headerlink" title="2.5 推送到Github"></a>2.5 推送到Github</h2><p>1.配置个人信息</p><figure class="highlight verilog"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git <span class="keyword">config</span> --<span class="keyword">global</span> user<span class="variable">.name</span> <span class="string">&quot;XXXX&quot;</span></span><br><span class="line">git <span class="keyword">config</span> --<span class="keyword">global</span> user<span class="variable">.email</span> <span class="string">&quot;XXXXXXXXX@XXX.com&quot;</span></span><br></pre></td></tr></table></figure><p>2.生成密钥</p><figure class="highlight excel"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -<span class="built_in">t</span> rsa -C <span class="string">&quot;XXXXXXXXX@XXX.com&quot;</span></span><br></pre></td></tr></table></figure><p>3.查看<code>id_rsa.pub</code>文件，并整个复制</p><figure class="highlight arcade"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cat ~<span class="regexp">/.ssh/i</span>d_rsa.pub</span><br></pre></td></tr></table></figure><p>4.然后再在<code>Github</code>中添加<code>ssh key</code></p><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715173551.png"></p><p>5.修改hexo根目录下的文件<code>_config.yml</code>中的deploy，添加之前保存的ssh：</p><figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">deploy:</span></span><br><span class="line"><span class="symbol">  type:</span> git</span><br><span class="line"><span class="symbol">  repository:</span> </span><br><span class="line"><span class="symbol">	github:</span> git@github.com:Justlovesmile/Justlovesmile.github.io.git</span><br><span class="line"><span class="symbol">  branch:</span> master</span><br></pre></td></tr></table></figure><p>6.上传到github：</p><figure class="highlight ebnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attribute">hexo d -g</span></span><br></pre></td></tr></table></figure><p>如果没有hexo-deployer-git，安装</p><figure class="highlight ada"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git <span class="comment">--save</span></span><br></pre></td></tr></table></figure><p>7.查看blog,<code>https://username.github.io</code></p><h1 id="3-Hexo基础"><a href="#3-Hexo基础" class="headerlink" title="3. Hexo基础"></a>3. Hexo基础</h1><h2 id="3-1-写博客"><a href="#3-1-写博客" class="headerlink" title="3.1 写博客"></a>3.1 写博客</h2><p>1.新建文章</p><figure class="highlight haxe"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo <span class="keyword">new</span> <span class="type">post</span> <span class="string">&#x27;我的第一篇文章&#x27;</span></span><br></pre></td></tr></table></figure><p>2.hexo自动生成一个md文件，修改md内容<br>头部如：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">postName</span> <span class="comment">#文章页面上的显示名称</span></span><br><span class="line"><span class="attr">date:</span> <span class="number">2020-03-10 12:30:16</span> <span class="comment">#文章生成时间，一般不改，当然也可以任意修改</span></span><br><span class="line"><span class="attr">categories:</span> <span class="string">默认分类</span> <span class="comment">#分类</span></span><br><span class="line"><span class="attr">tags:</span> [<span class="string">tag1</span>,<span class="string">tag2</span>,<span class="string">tag3</span>] <span class="comment">#文章标签，可空，多标签请用格式，注意冒号:后面有个空格</span></span><br><span class="line"><span class="attr">description:</span> <span class="string">摘要</span></span><br><span class="line"><span class="meta">---</span></span><br></pre></td></tr></table></figure><p>3.在头部下面即可写文章内容</p><blockquote><p>markdown，支持html和其自带的语法。Markdown是一种可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，它可以使普通文本内容具有一定的格式。</p></blockquote><h2 id="3-2-新建页面"><a href="#3-2-新建页面" class="headerlink" title="3.2 新建页面"></a>3.2 新建页面</h2><figure class="highlight haxe"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo <span class="keyword">new</span> <span class="type">page</span> <span class="string">&quot;music&quot;</span></span><br></pre></td></tr></table></figure><p>会在source文件夹中生成music文件夹，其内的index.md为页面内容</p><h2 id="3-3-常用基本命令"><a href="#3-3-常用基本命令" class="headerlink" title="3.3 常用基本命令"></a>3.3 常用基本命令</h2><figure class="highlight livecodeserver"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">hexo <span class="built_in">new</span> <span class="string">&quot;文章&quot;</span></span><br><span class="line">hexo <span class="built_in">new</span> <span class="built_in">post</span> <span class="string">&quot;文章&quot;</span></span><br><span class="line">hexo <span class="built_in">new</span> page <span class="string">&quot;页面&quot;</span></span><br><span class="line"></span><br><span class="line">hexo clean <span class="comment">#清除缓存，每次重新部署时最好执行</span></span><br><span class="line">hexo g <span class="comment">#生成静态页面</span></span><br><span class="line">hexo s <span class="comment">#本地端口，默认4000运行</span></span><br><span class="line">hexo s -p <span class="number">5000</span> <span class="comment"># 端口5000</span></span><br><span class="line">hexo d <span class="comment">#部署</span></span><br><span class="line">hexo deploy <span class="comment">#部署</span></span><br></pre></td></tr></table></figure><figure class="highlight 1c"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#为了方便，每次准备推送时,可以👇</span></span><br><span class="line">hexo cl <span class="meta">&amp;&amp; hexo g &amp;&amp; hexo d</span></span><br></pre></td></tr></table></figure><h1 id="4-Hexo进阶"><a href="#4-Hexo进阶" class="headerlink" title="4. Hexo进阶"></a>4. Hexo进阶</h1><h2 id="4-1-推荐编辑器"><a href="#4-1-推荐编辑器" class="headerlink" title="4.1 推荐编辑器"></a>4.1 推荐编辑器</h2><p>方便后续魔改内容</p><ol><li>VSCode <a target="_blank" rel="external nofollow noopener noreferrer" href="https://code.visualstudio.com/">https://code.visualstudio.com/</a></li><li>Sublime Text <a target="_blank" rel="external nofollow noopener noreferrer" href="http://www.sublimetext.com/">http://www.sublimetext.com/</a></li></ol><h2 id="4-2-更换主题"><a href="#4-2-更换主题" class="headerlink" title="4.2 更换主题"></a>4.2 更换主题</h2><p>1.因为自带的主题并不好看，所以可以更换主题，常见主题的很多，例如butterfly</p><figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd <span class="regexp">/e/</span>hexo/</span><br><span class="line">git clone -b master https:<span class="regexp">//gi</span>thub.com<span class="regexp">/jerryc127/</span>hexo-theme-butterfly.git themes/butterfly</span><br></pre></td></tr></table></figure><p>2.修改hexo根目录下的<code>_config.yml</code>中的 <code>theme: landscape</code>改成<code>theme： butterfly</code> ,(注意冒号：后面有一个空格)</p><h2 id="4-3-注册Coding账号"><a href="#4-3-注册Coding账号" class="headerlink" title="4.3 注册Coding账号"></a>4.3 注册Coding账号</h2><p>1.由于国内访问github的速度较慢，因此可以通过双部署同时部署到Coding<a target="_blank" rel="external nofollow noopener noreferrer" href="https://coding.net/">https://coding.net/</a>，同样注册账号，新建项目，项目名随意<br><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715175443.png"><br>2.创建好后，同样记住<code>SSH</code><br>3.修改hexo根目录下的文件<code>_config.yml</code>中的deploy，添加之前保存的ssh：<br>例如我的：</p><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repository: </span><br><span class="line">    github: git@github<span class="selector-class">.com</span>:Justlovesmile/Justlovesmile<span class="selector-class">.github</span><span class="selector-class">.io</span><span class="selector-class">.git</span></span><br><span class="line">    coding: git@e<span class="selector-class">.coding</span><span class="selector-class">.net</span>:justlovesmile/justlovesmile<span class="selector-class">.top</span><span class="selector-class">.git</span></span><br><span class="line">  branch: master</span><br></pre></td></tr></table></figure><p>4.在Coding中保存你的密钥，方法同Github</p><figure class="highlight arcade"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cat ~<span class="regexp">/.ssh/i</span>d_rsa.pub</span><br></pre></td></tr></table></figure><p>5.下次<code>hexo d -g</code>部署后,开启<code>静态网站</code>，然后可以通过其提供的<code>//xxxxxxx.coding-pages.com</code>访问。（第一次记得点，<code>立即部署</code>）</p><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715180119.png"></p><p>6.推荐开启强制使用https</p><h2 id="4-4-注册Gitee账号"><a href="#4-4-注册Gitee账号" class="headerlink" title="4.4 注册Gitee账号"></a>4.4 注册Gitee账号</h2><p>1.除了Coding外，网内访问速度较快的还有码云<a target="_blank" rel="external nofollow noopener noreferrer" href="https://gitee.com/">https://gitee.com/</a>，同样注册账号，新建项目<code>yourname</code><br>2.创建好后，同样记住<code>SSH</code><br>3.修改hexo根目录下的文件<code>_config.yml</code>中的deploy，添加之前保存的ssh：<br>例如我的：</p><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  type: git</span><br><span class="line">  repository: </span><br><span class="line">    gitee: git@gitee.com:justlovesmile/justlovesmile.git</span><br><span class="line">    coding: git@e.coding.net:justlovesmile/justlovesmile.<span class="attribute">top.git</span></span><br><span class="line"><span class="attribute">    github</span>: git<span class="variable">@github</span>.<span class="attribute">com</span>:Justlovesmile/Justlovesmile.github.io.git</span><br><span class="line">  <span class="attribute">branch</span>: master</span><br></pre></td></tr></table></figure><p>4.在Gitee中保存你的密钥，方法同Github</p><figure class="highlight arcade"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cat ~<span class="regexp">/.ssh/i</span>d_rsa.pub</span><br></pre></td></tr></table></figure><p>5.开启GiteePages服务，Gitee只能免费使用gitee.io域名,其他的域名要收费，并且免费版每次部署后，需要手动点击更新来更新网站内容<br><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715181243.png"><br>5.推荐开启强制使用https</p><h2 id="4-5-绑定域名"><a href="#4-5-绑定域名" class="headerlink" title="4.5 绑定域名"></a>4.5 绑定域名</h2><p>1.在阿里云<a target="_blank" rel="external nofollow noopener noreferrer" href="https://wanwang.aliyun.com/">https://wanwang.aliyun.com/</a>购买自己喜欢的域名</p><p>2.在阿里云控制台找到<code>云解析DNS</code></p><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715185711.png"></p><p>找到自己购买的域名,点击<code>解析设置</code></p><p>添加记录</p><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715185838.png"></p><p>3.如果多部署了，可以设置多条</p><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715190408.png"></p><p>一条给github.io，一条给coding-pages.com等等</p><p>4.再返回到对应的部署页面，修改解析域名</p><ul><li>Github的在仓库的<code>Settings--Github_Pages--Custon_domain</code></li><li>Coding的<code>静态网站-设置-自定义域名</code></li></ul><h2 id="4-6-安装插件"><a href="#4-6-安装插件" class="headerlink" title="4.6 安装插件"></a>4.6 安装插件</h2><p>1.安装hexo插件</p><figure class="highlight mipsasm"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm <span class="keyword">install </span>hexo-generator-sitemap --save</span><br><span class="line">npm <span class="keyword">install </span>hexo-generator-<span class="keyword">baidu-sitemap </span>--save</span><br><span class="line">npm <span class="keyword">install </span>hexo-generator-feed --save</span><br></pre></td></tr></table></figure><p>2.在hexo根目录下的文件<code>_config.yml</code>中添加</p><figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="symbol">Plugins:</span> <span class="meta"># 在该区域添加两个插件名称</span></span><br><span class="line">  - hexo-generator-sitemap</span><br><span class="line">  - hexo-generator-baidu-sitemap</span><br><span class="line">  - hexo-generator-feed</span><br><span class="line"><span class="meta"># 自动生成sitemap</span></span><br><span class="line"><span class="symbol">sitemap:</span></span><br><span class="line"><span class="symbol">  path:</span> sitemap.xml</span><br><span class="line"><span class="symbol">baidusitemap:</span></span><br><span class="line"><span class="symbol">  path:</span> baidusitemap.xml</span><br></pre></td></tr></table></figure><p>3.更多插件见<a href="/posts/86111745.html">Hexo插件推荐</a></p><h2 id="4-7-添加robots-txt"><a href="#4-7-添加robots-txt" class="headerlink" title="4.7 添加robots.txt"></a>4.7 添加robots.txt</h2><p>1.在hexo根目录下的source文件夹中，创建一个名为robots.txt的文件<br>2.内容为</p><figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">User-agent: * </span><br><span class="line"><span class="symbol">Allow:</span> /</span><br><span class="line"><span class="symbol">Allow:</span> <span class="meta-keyword">/categories/</span></span><br><span class="line"><span class="symbol">Allow:</span> <span class="meta-keyword">/tags/</span></span><br><span class="line"><span class="symbol">Allow:</span> <span class="meta-keyword">/archives/</span></span><br><span class="line"><span class="symbol"></span></span><br><span class="line"><span class="symbol">Disallow:</span> <span class="meta-keyword">/js/</span></span><br><span class="line"><span class="symbol">Disallow:</span> <span class="meta-keyword">/css/</span></span><br><span class="line"><span class="symbol">Disallow:</span> <span class="meta-keyword">/images/</span></span><br><span class="line"><span class="symbol">Disallow:</span> <span class="meta-keyword">/img/</span></span><br><span class="line"><span class="symbol">Disallow:</span> <span class="meta-keyword">/lib/</span></span><br><span class="line"><span class="symbol"></span></span><br><span class="line"><span class="symbol">Sitemap:</span> https:<span class="comment">//XXXXXXXXXXX.XXX/sitemap.xml</span></span><br><span class="line"><span class="symbol">Sitemap:</span> https:<span class="comment">//XXXXXXXXXXX.XXX/baidusitemap.xml</span></span><br></pre></td></tr></table></figure><h2 id="4-8-创建百度站长账号"><a href="#4-8-创建百度站长账号" class="headerlink" title="4.8 创建百度站长账号"></a>4.8 创建百度站长账号</h2><p>1.进入百度站长<a target="_blank" rel="external nofollow noopener noreferrer" href="https://ziyuan.baidu.com/">https://ziyuan.baidu.com/</a>，注册账号，登录<br>2.点击用户中心-站点管理-添加网站</p><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/image.png"></p><p>3.验证<br>（1）若选择文件验证，则下载文件到根目录下的source文件夹中，并在文件内容最上面添加三行</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">---</span></span><br><span class="line"><span class="attr">layout:</span> <span class="literal">false</span></span><br><span class="line"><span class="meta">---</span></span><br></pre></td></tr></table></figure><p>（2）若选择HTML标签验证，需要找到主题下的head文件位置，添加其给的html代码，（一般在<code>/themes/xxxxxx/layout/**/head.pug(ejs)</code>内)</p><p>（3）若选择CNAME验证，操作和绑定域名操作一样，看其给的说明即可</p><p>4.推送你的网址，使之更快收录<br>点击左侧<code>资源提交-普通收录</code>可以选择三种方式提交网址</p><h2 id="4-9-创建百度-谷歌统计账号"><a href="#4-9-创建百度-谷歌统计账号" class="headerlink" title="4.9 创建百度/谷歌统计账号"></a>4.9 创建百度/谷歌统计账号</h2><p>1.现在绝大部分国内主题集成了百度统计<a target="_blank" rel="external nofollow noopener noreferrer" href="https://tongji.baidu.com/">https://tongji.baidu.com/</a>和<a target="_blank" rel="external nofollow noopener noreferrer" href="https://search.google.com/">谷歌统计</a>功能，如果没有可以自行在head文件内添加，和上面的html标签验证相似</p><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715193338.png"></p><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> _hmt = _hmt || [];</span></span><br><span class="line"><span class="javascript">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> hm = <span class="built_in">document</span>.createElement(<span class="string">&quot;script&quot;</span>);</span></span><br><span class="line"><span class="javascript">  hm.src = <span class="string">&quot;https://hm.baidu.com/hm.js?a2ee893562999ebad688b0d82daa100a&quot;</span>;</span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> s = <span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;script&quot;</span>)[<span class="number">0</span>]; </span></span><br><span class="line"><span class="javascript">  s.parentNode.insertBefore(hm, s);</span></span><br><span class="line"><span class="javascript">&#125;)();</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>其中问号<code>?</code>之后的一串数字为你的统计id</p><figure class="highlight ini"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">hm.src</span> = <span class="string">&quot;https://hm.baidu.com/hm.js?a2ee893562999ebad688b0d82daa100a&quot;</span><span class="comment">;</span></span><br></pre></td></tr></table></figure><p>2.谷歌同理，不过需要翻墙才能进去</p><h2 id="4-10-CDN图床"><a href="#4-10-CDN图床" class="headerlink" title="4.10 CDN图床"></a>4.10 CDN图床</h2><p>1.博客中往往会使用到很多图片，如果全部都保存在博客中，那肯定是不行的，推荐使用<code>Github+Jsdelivr+PicGo</code>搭建免费图床<br>2.在Github中创建一个新仓库<code>CDN</code>，名字随意<br>3.生成Token<br>在右上角个人设置处（不是仓库设置）依次选择<code>Settings</code>-<code>Developer settings</code>-<code>Personal access tokens</code>-<code>Generate new token</code>，勾选<code>repo</code>，然后点击<code>Generate token</code>生成一个<code>Token</code></p><p><strong>注意这个Token只会显示一次，自己先保存下来，或者等后面配置好PicGo后再关闭此网页</strong></p><p>4.配置PicGo，使用jsDelivr的CDN<br>(1)下载<code>PicGo</code> <a target="_blank" rel="external nofollow noopener noreferrer" href="https://github.com/Molunerfinn/picgo/releases">https://github.com/Molunerfinn/picgo/releases</a><br>(2)设置仓库名<br>(3)设置分支名<br>(4)设置Token<br>(5)指定存储路径<br>(6)设定自定义域名</p><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715200322.png"></p><figure class="highlight vala"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#每次上传后,生成图片路径</span></span><br><span class="line">自定义域名+/+储存路径+上传的图片名</span><br></pre></td></tr></table></figure><h1 id="5-主题配置总结"><a href="#5-主题配置总结" class="headerlink" title="5. 主题配置总结"></a>5. 主题配置总结</h1><h2 id="5-1-Ayer主题修改–适用ejs类型的主题"><a href="#5-1-Ayer主题修改–适用ejs类型的主题" class="headerlink" title="5.1 Ayer主题修改–适用ejs类型的主题"></a>5.1 Ayer主题修改–适用ejs类型的主题</h2><h3 id="5-1-1-随机博客封面"><a href="#5-1-1-随机博客封面" class="headerlink" title="5.1.1 随机博客封面"></a>5.1.1 随机博客封面</h3><p><a href="/posts/27301.html">Hexo博客美化之随机封面</a></p><h3 id="5-1-2-添加二级菜单"><a href="#5-1-2-添加二级菜单" class="headerlink" title="5.1.2 添加二级菜单"></a>5.1.2 添加二级菜单</h3><p><a href="/posts/14357.html">Hexo博客添加二级菜单</a></p><h3 id="5-1-3-添加公告板"><a href="#5-1-3-添加公告板" class="headerlink" title="5.1.3 添加公告板"></a>5.1.3 添加公告板</h3><p><a href="/posts/57206.html">Hexo博客美化之添加公告板</a></p><h2 id="5-2-Butterfly主题–适用pug类型的主题"><a href="#5-2-Butterfly主题–适用pug类型的主题" class="headerlink" title="5.2 Butterfly主题–适用pug类型的主题"></a>5.2 Butterfly主题–适用pug类型的主题</h2><ul><li>看Butterfly作者的教程<a target="_blank" rel="external nofollow noopener noreferrer" href="https://butterfly.js.org/">https://butterfly.js.org/</a></li><li>看小康博客<a target="_blank" rel="external nofollow noopener noreferrer" href="https://www.antmoe.com/posts/a811d614/index.html">https://www.antmoe.com/posts/a811d614/index.html</a></li></ul><h1 id="6-主题魔改"><a href="#6-主题魔改" class="headerlink" title="6. 主题魔改"></a>6. 主题魔改</h1><h2 id="6-1-页脚养鱼🐟"><a href="#6-1-页脚养鱼🐟" class="headerlink" title="6.1 页脚养鱼🐟"></a>6.1 页脚养鱼🐟</h2><ul><li>摘取自<a target="_blank" rel="external nofollow noopener noreferrer" href="https://xiabor.com/714f.html">木槿：Hexo大结局</a></li></ul><p>1.在<code>\themes\butterfly\layout\includes\footer.pug</code>最后添加这句话</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">#jsi-flying-fish-container.container</span><br><span class="line"></span><br><span class="line">style.</span><br><span class="line">  @media only screen and (max-width: 767px)&#123;</span><br><span class="line">    #sidebar_search_box input[type=text]&#123;width:calc(100% - 24px)&#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure><p>2.然后添加js文件，如果是butterfly在主题配置的inject处添加即可</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">data-pjax</span> <span class="attr">src</span>=<span class="string">&quot;https://cdn.jsdelivr.net/gh/Justlovesmile/CDN@latest/js/fish.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><p>3.修改样式，butterfly在<code>themes\butterfly\source\css\_layout\footer.styl</code>，这一部分对应修改</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#footer</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">relative</span></span><br><span class="line">  <span class="attr">background:</span> <span class="string">$light-blue</span></span><br><span class="line">  <span class="attr">background-attachment:</span> <span class="string">local</span></span><br><span class="line">  <span class="attr">background-position:</span> <span class="string">bottom</span></span><br><span class="line">  <span class="attr">background-size:</span> <span class="string">cover</span></span><br><span class="line"></span><br><span class="line">  <span class="string">if</span> <span class="string">hexo-config(&#x27;footer_bg&#x27;)</span> <span class="type">!=</span> <span class="literal">false</span></span><br><span class="line">    <span class="string">&amp;:before</span></span><br><span class="line">      <span class="attr">position:</span> <span class="string">absolute</span></span><br><span class="line">      <span class="attr">width:</span> <span class="number">100</span><span class="string">%</span></span><br><span class="line">      <span class="attr">height:</span> <span class="number">100</span><span class="string">%</span></span><br><span class="line">      <span class="attr">background-color:</span> <span class="string">alpha($dark-black,</span> <span class="number">.1</span><span class="string">)</span></span><br><span class="line">      <span class="attr">content:</span> <span class="string">&#x27;&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">#footer-wrap</span></span><br><span class="line">  <span class="attr">position:</span> <span class="string">absolute</span></span><br><span class="line">  <span class="attr">padding:</span> <span class="number">1.</span><span class="string">2rem</span> <span class="string">1rem</span> <span class="number">1.</span><span class="string">4rem</span></span><br><span class="line">  <span class="attr">color:</span> <span class="string">$light-grey</span></span><br><span class="line">  <span class="attr">text-align:</span> <span class="string">center</span></span><br><span class="line">  <span class="attr">left:</span> <span class="number">0</span></span><br><span class="line">  <span class="attr">right:</span> <span class="number">0</span></span><br><span class="line">  <span class="string">top:0</span></span><br><span class="line">  <span class="attr">bottom:</span> <span class="number">0</span></span><br></pre></td></tr></table></figure><h2 id="6-2-valine评论"><a href="#6-2-valine评论" class="headerlink" title="6.2 valine评论"></a>6.2 valine评论</h2><p><a href="/posts/27831.html">博客美化之valine</a></p><h2 id="6-3-博客文章加密"><a href="#6-3-博客文章加密" class="headerlink" title="6.3 博客文章加密"></a>6.3 博客文章加密</h2><p><a href="/posts/43010.html">添加博客加密</a>: <code>文章添加密码</code>功能</p><h2 id="6-4-打字机效果"><a href="#6-4-打字机效果" class="headerlink" title="6.4 打字机效果"></a>6.4 打字机效果</h2><p><a href="/posts/7e7ef81c.html">花里胡哨的打字机js</a></p><p><a href="/posts/24067.html">Type.js打字机效果</a>: 添加<code>打字机效果</code></p><h2 id="6-5-图标，动态图标，网页运行时间，全站黑白，鼠标点击特效，网页动态标题，樱花，音效"><a href="#6-5-图标，动态图标，网页运行时间，全站黑白，鼠标点击特效，网页动态标题，樱花，音效" class="headerlink" title="6.5 图标，动态图标，网页运行时间，全站黑白，鼠标点击特效，网页动态标题，樱花，音效"></a>6.5 图标，动态图标，网页运行时间，全站黑白，鼠标点击特效，网页动态标题，樱花，音效</h2><p><a href="/posts/56163.html">博客中能用到的代码</a>: 关于<code>font awesome图标</code>字体库，使用<code>动态图标</code>，添加<code>网页运行时间</code>，<code>全站变黑白</code>，<code>鼠标点击特效</code>，<code>网页标题的动态效果</code>，<code>网页樱花特效</code>，<code>鼠标触动音乐特效</code></p><h2 id="6-6-旋转小人，每日诗句"><a href="#6-6-旋转小人，每日诗句" class="headerlink" title="6.6 旋转小人，每日诗句"></a>6.6 旋转小人，每日诗句</h2><p><a href="/posts/15391.html">博客中能用到的代码（二）</a>: 添加<code>旋转小人</code>和<code>每日诗句</code></p><h2 id="6-7-展示pdf"><a href="#6-7-展示pdf" class="headerlink" title="6.7 展示pdf"></a>6.7 展示pdf</h2><p><a href="/posts/7376.html">Hexo竟然可以展示PDF</a></p><h2 id="6-8-插件汇总"><a href="#6-8-插件汇总" class="headerlink" title="6.8 插件汇总"></a>6.8 插件汇总</h2><p><a href="/posts/86111745.html">Hexo插件总结推荐</a></p><h2 id="6-9-前端禁止右键，F12，F5"><a href="#6-9-前端禁止右键，F12，F5" class="headerlink" title="6.9 前端禁止右键，F12，F5"></a>6.9 前端禁止右键，F12，F5</h2><ul><li>在文件中添加以下代码</li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript"><span class="function"><span class="keyword">function</span> <span class="title">unmouse</span>(<span class="params"></span>)</span>&#123;	</span></span><br><span class="line"><span class="javascript">	<span class="built_in">document</span>.oncontextmenu = <span class="keyword">new</span> <span class="built_in">Function</span>(<span class="string">&quot;return false;&quot;</span>);</span></span><br><span class="line"><span class="javascript">	<span class="built_in">document</span>.onkeydown = <span class="built_in">document</span>.onkeyup = <span class="built_in">document</span>.onkeypress = <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> e = event || <span class="built_in">window</span>.event || <span class="built_in">arguments</span>.callee.caller.arguments[<span class="number">0</span>];</span></span><br><span class="line"><span class="javascript">		<span class="keyword">if</span> (e &amp;&amp; (e.keyCode == <span class="number">123</span> || (e.keyCode == <span class="number">116</span> &amp;&amp; e.type!=<span class="string">&#x27;keypress&#x27;</span>))) </span></span><br><span class="line"><span class="javascript">		&#123;</span></span><br><span class="line"><span class="javascript">			e.returnValue = <span class="literal">false</span>;</span></span><br><span class="line"><span class="javascript">			<span class="keyword">return</span> (<span class="literal">false</span>);</span></span><br><span class="line"><span class="javascript">		&#125;</span></span><br><span class="line"><span class="javascript">	&#125;</span></span><br><span class="line"><span class="javascript">&#125;</span></span><br><span class="line"><span class="javascript">unmouse()</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure><h2 id="6-10-星空背景"><a href="#6-10-星空背景" class="headerlink" title="6.10 星空背景"></a>6.10 星空背景</h2><ul><li><a href="/posts/6a260bf6.html">星空和流星特效</a><br><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/202108121834269.gif"></li></ul><h1 id="7-高级魔改"><a href="#7-高级魔改" class="headerlink" title="7. 高级魔改"></a>7. 高级魔改</h1><h2 id="7-1-Github-Calendar"><a href="#7-1-Github-Calendar" class="headerlink" title="7.1 Github Calendar"></a>7.1 Github Calendar</h2><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20210208220529.png"></p><p><a target="_blank" rel="external nofollow noopener noreferrer" href="https://akilar.top/posts/1f9c68c9/">Gitcalendar</a><br><a target="_blank" rel="external nofollow noopener noreferrer" href="https://zfe.space/post/6948.html">教程：基于Butterfly主题（去jquery）的gitcalendar3.0</a></p><h2 id="7-2-首页磁贴"><a href="#7-2-首页磁贴" class="headerlink" title="7.2 首页磁贴"></a>7.2 首页磁贴</h2><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20210208220855.png"><br><a target="_blank" rel="external nofollow noopener noreferrer" href="https://akilar.top/posts/a9131002/">Akilar：Categories Magnet</a></p><h2 id="7-3-首页置顶轮播图"><a href="#7-3-首页置顶轮播图" class="headerlink" title="7.3 首页置顶轮播图"></a>7.3 首页置顶轮播图</h2><p><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20210208220928.png"></p><p><a target="_blank" rel="external nofollow noopener noreferrer" href="https://akilar.top/posts/8e1264d1/">Akilar：Slider Bar</a></p></article><div class="post-reward"><div class="reward-button"><i class="fas fa-hamburger"></i> 打赏作者</div><div class="reward-main"><ul class="reward-all"><ul class="reward-group"><li class="reward-item"><a href="/img/wechat.jpg" target="_blank"><img class="post-qr-code-img" src="" data-lazy-src="/img/wechat.jpg" alt="微信"></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="/img/alipay.jpg" target="_blank"><img class="post-qr-code-img" src="" data-lazy-src="/img/alipay.jpg" alt="支付宝"></a><div class="post-qr-code-desc">支付宝</div></li></ul><a class="reward-main-btn" href="/donate"><div class="reward-text">赞赏者名单</div><div class="reward-dec">因为你们的支持让我意识到写文章的价值🙏</div></a></ul></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a><a class="post-meta__tags" href="/tags/Hexo/">Hexo</a><a class="post-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2/">博客</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200715201402.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload='this.media="all"'><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer="defer"></script></div></div><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-info">必看 | Hexo博客搭建超级指南</span></div><div class="post-copyright__type"><span class="post-copyright-info"><a href="https://blog.justlovesmile.top/posts/c8972b63.html">https://blog.justlovesmile.top/posts/c8972b63.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="external nofollow noopener noreferrer">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://blog.justlovesmile.top" target="_blank">Justlovesmile's BLOG</a>！</span></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/posts/604a50ec.html"><img class="prev-cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200723202146.png" onerror='onerror=null,src="/img/404.jpg"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">随笔记录 | 漫威DC观影指南</div></div></a></div><div class="next-post pull-right"><a href="/posts/e24ee5c3.html"><img class="next-cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/image/ballloading2.gif" onerror='onerror=null,src="/img/404.jpg"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">随笔记录 | Loading竟然这样有趣</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/posts/56b0563d.html" title="Hexo博客 | 如何让Butterfly主题导航栏居中"><img class="cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20220315095300.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-03-15</div><div class="title">Hexo博客 | 如何让Butterfly主题导航栏居中</div></div></a></div><div><a href="/posts/2bfb1caa.html" title="Hexo博客 | 动态分类标签条，自动获取全站分类与标签进行展示"><img class="cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/202108142119256.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-14</div><div class="title">Hexo博客 | 动态分类标签条，自动获取全站分类与标签进行展示</div></div></a></div><div><a href="/posts/6a260bf6.html" title="Hexo博客 | 如何让你的博客拥有星空背景和流星特效"><img class="cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/202108121750639.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-12</div><div class="title">Hexo博客 | 如何让你的博客拥有星空背景和流星特效</div></div></a></div><div><a href="/posts/57206.html" title="Hexo博客 | 如何在博客首页添加公告板模块"><img class="cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20200630163919.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-06-30</div><div class="title">Hexo博客 | 如何在博客首页添加公告板模块</div></div></a></div><div><a href="/posts/27301.html" title="Hexo博客 | 采用随机图片作为博客封面背景，真香！"><img class="cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/display.gif" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-06-29</div><div class="title">Hexo博客 | 采用随机图片作为博客封面背景，真香！</div></div></a></div><div><a href="/posts/27831.html" title="Hexo博客 | 如何让你的valine更好看"><img class="cover" src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/image/213312-1558704792daa4.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-06-28</div><div class="title">Hexo博客 | 如何让你的valine更好看</div></div></a></div></div></div><hr><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i> <span>评论</span></div></div><div class="comment-wrap"><div><div id="twikoo-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="" data-lazy-src="/img/avatar.jpg" onerror='this.onerror=null,this.src="/img/friend_404.gif"' alt="avatar"></div><div class="author-info__name">Justlovesmile</div><div class="author-info__description">一个计算机专业学生的个人博客，记录着学习笔记和生活中的思考，期待着和所有人相遇</div></div><div class="card-info-data is-center"><div class="card-info-data-item"><a href="/archives/"><div class="headline">文章</div><div class="length-num">75</div></a></div><div class="card-info-data-item"><a href="/tags/"><div class="headline">标签</div><div class="length-num">69</div></a></div><div class="card-info-data-item"><a href="/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content"><p>不定时更新博客，欢迎交换<a href="/friends/"><strong>友链</strong></a>...</p><div class="twopeople"><div class="container" style="height:200px"><canvas class="illo" width="800" height="800" style="max-width:200px;max-height:200px;touch-action:none;width:640px;height:640px"></canvas></div><script src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/twopeople1.js"></script><script src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/zdog.dist.js"></script><script id="rendered-js" src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/twopeople.js"></script><style>.twopeople{margin:0;align-items:center;justify-content:center;text-align:center}canvas{display:block;margin:0 auto;cursor:move}</style></div><div style="text-align:center"><a href="https://www.foreverblog.cn/" target="_blank" rel="external nofollow noopener noreferrer"><img src="" data-lazy-src="https://img.foreverblog.cn/logo_en_default.png" alt="foreverblog" style="width:auto;height:16px"></a></div></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#1-%E5%BC%95%E8%A8%80"><span class="toc-text">1. 引言</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#2-%E7%8E%AF%E5%A2%83%E9%83%A8%E7%BD%B2%E5%B7%A5%E4%BD%9C"><span class="toc-text">2. 环境部署工作</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#2-1-%E5%AE%89%E8%A3%85Node-js"><span class="toc-text">2.1 安装Node.js</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-2-%E5%AE%89%E8%A3%85Git"><span class="toc-text">2.2 安装Git</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-3-%E6%B3%A8%E5%86%8CGithub%E8%B4%A6%E5%8F%B7"><span class="toc-text">2.3 注册Github账号</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-4-%E5%AE%89%E8%A3%85Hexo"><span class="toc-text">2.4 安装Hexo</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#2-5-%E6%8E%A8%E9%80%81%E5%88%B0Github"><span class="toc-text">2.5 推送到Github</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#3-Hexo%E5%9F%BA%E7%A1%80"><span class="toc-text">3. Hexo基础</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#3-1-%E5%86%99%E5%8D%9A%E5%AE%A2"><span class="toc-text">3.1 写博客</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-2-%E6%96%B0%E5%BB%BA%E9%A1%B5%E9%9D%A2"><span class="toc-text">3.2 新建页面</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#3-3-%E5%B8%B8%E7%94%A8%E5%9F%BA%E6%9C%AC%E5%91%BD%E4%BB%A4"><span class="toc-text">3.3 常用基本命令</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#4-Hexo%E8%BF%9B%E9%98%B6"><span class="toc-text">4. Hexo进阶</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#4-1-%E6%8E%A8%E8%8D%90%E7%BC%96%E8%BE%91%E5%99%A8"><span class="toc-text">4.1 推荐编辑器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-2-%E6%9B%B4%E6%8D%A2%E4%B8%BB%E9%A2%98"><span class="toc-text">4.2 更换主题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-3-%E6%B3%A8%E5%86%8CCoding%E8%B4%A6%E5%8F%B7"><span class="toc-text">4.3 注册Coding账号</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-4-%E6%B3%A8%E5%86%8CGitee%E8%B4%A6%E5%8F%B7"><span class="toc-text">4.4 注册Gitee账号</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-5-%E7%BB%91%E5%AE%9A%E5%9F%9F%E5%90%8D"><span class="toc-text">4.5 绑定域名</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-6-%E5%AE%89%E8%A3%85%E6%8F%92%E4%BB%B6"><span class="toc-text">4.6 安装插件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-7-%E6%B7%BB%E5%8A%A0robots-txt"><span class="toc-text">4.7 添加robots.txt</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-8-%E5%88%9B%E5%BB%BA%E7%99%BE%E5%BA%A6%E7%AB%99%E9%95%BF%E8%B4%A6%E5%8F%B7"><span class="toc-text">4.8 创建百度站长账号</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-9-%E5%88%9B%E5%BB%BA%E7%99%BE%E5%BA%A6-%E8%B0%B7%E6%AD%8C%E7%BB%9F%E8%AE%A1%E8%B4%A6%E5%8F%B7"><span class="toc-text">4.9 创建百度&#x2F;谷歌统计账号</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#4-10-CDN%E5%9B%BE%E5%BA%8A"><span class="toc-text">4.10 CDN图床</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#5-%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE%E6%80%BB%E7%BB%93"><span class="toc-text">5. 主题配置总结</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#5-1-Ayer%E4%B8%BB%E9%A2%98%E4%BF%AE%E6%94%B9%E2%80%93%E9%80%82%E7%94%A8ejs%E7%B1%BB%E5%9E%8B%E7%9A%84%E4%B8%BB%E9%A2%98"><span class="toc-text">5.1 Ayer主题修改–适用ejs类型的主题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#5-1-1-%E9%9A%8F%E6%9C%BA%E5%8D%9A%E5%AE%A2%E5%B0%81%E9%9D%A2"><span class="toc-text">5.1.1 随机博客封面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-1-2-%E6%B7%BB%E5%8A%A0%E4%BA%8C%E7%BA%A7%E8%8F%9C%E5%8D%95"><span class="toc-text">5.1.2 添加二级菜单</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-1-3-%E6%B7%BB%E5%8A%A0%E5%85%AC%E5%91%8A%E6%9D%BF"><span class="toc-text">5.1.3 添加公告板</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#5-2-Butterfly%E4%B8%BB%E9%A2%98%E2%80%93%E9%80%82%E7%94%A8pug%E7%B1%BB%E5%9E%8B%E7%9A%84%E4%B8%BB%E9%A2%98"><span class="toc-text">5.2 Butterfly主题–适用pug类型的主题</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#6-%E4%B8%BB%E9%A2%98%E9%AD%94%E6%94%B9"><span class="toc-text">6. 主题魔改</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#6-1-%E9%A1%B5%E8%84%9A%E5%85%BB%E9%B1%BC%F0%9F%90%9F"><span class="toc-text">6.1 页脚养鱼🐟</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-2-valine%E8%AF%84%E8%AE%BA"><span class="toc-text">6.2 valine评论</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-3-%E5%8D%9A%E5%AE%A2%E6%96%87%E7%AB%A0%E5%8A%A0%E5%AF%86"><span class="toc-text">6.3 博客文章加密</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-4-%E6%89%93%E5%AD%97%E6%9C%BA%E6%95%88%E6%9E%9C"><span class="toc-text">6.4 打字机效果</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-5-%E5%9B%BE%E6%A0%87%EF%BC%8C%E5%8A%A8%E6%80%81%E5%9B%BE%E6%A0%87%EF%BC%8C%E7%BD%91%E9%A1%B5%E8%BF%90%E8%A1%8C%E6%97%B6%E9%97%B4%EF%BC%8C%E5%85%A8%E7%AB%99%E9%BB%91%E7%99%BD%EF%BC%8C%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E7%89%B9%E6%95%88%EF%BC%8C%E7%BD%91%E9%A1%B5%E5%8A%A8%E6%80%81%E6%A0%87%E9%A2%98%EF%BC%8C%E6%A8%B1%E8%8A%B1%EF%BC%8C%E9%9F%B3%E6%95%88"><span class="toc-text">6.5 图标，动态图标，网页运行时间，全站黑白，鼠标点击特效，网页动态标题，樱花，音效</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-6-%E6%97%8B%E8%BD%AC%E5%B0%8F%E4%BA%BA%EF%BC%8C%E6%AF%8F%E6%97%A5%E8%AF%97%E5%8F%A5"><span class="toc-text">6.6 旋转小人，每日诗句</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-7-%E5%B1%95%E7%A4%BApdf"><span class="toc-text">6.7 展示pdf</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-8-%E6%8F%92%E4%BB%B6%E6%B1%87%E6%80%BB"><span class="toc-text">6.8 插件汇总</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-9-%E5%89%8D%E7%AB%AF%E7%A6%81%E6%AD%A2%E5%8F%B3%E9%94%AE%EF%BC%8CF12%EF%BC%8CF5"><span class="toc-text">6.9 前端禁止右键，F12，F5</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#6-10-%E6%98%9F%E7%A9%BA%E8%83%8C%E6%99%AF"><span class="toc-text">6.10 星空背景</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#7-%E9%AB%98%E7%BA%A7%E9%AD%94%E6%94%B9"><span class="toc-text">7. 高级魔改</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#7-1-Github-Calendar"><span class="toc-text">7.1 Github Calendar</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-2-%E9%A6%96%E9%A1%B5%E7%A3%81%E8%B4%B4"><span class="toc-text">7.2 首页磁贴</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#7-3-%E9%A6%96%E9%A1%B5%E7%BD%AE%E9%A1%B6%E8%BD%AE%E6%92%AD%E5%9B%BE"><span class="toc-text">7.3 首页置顶轮播图</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/posts/56b0563d.html" title="Hexo博客 | 如何让Butterfly主题导航栏居中"><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20220315095300.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="Hexo博客 | 如何让Butterfly主题导航栏居中"></a><div class="content"><a class="title" href="/posts/56b0563d.html" title="Hexo博客 | 如何让Butterfly主题导航栏居中">Hexo博客 | 如何让Butterfly主题导航栏居中</a><time datetime="2022-03-15T01:25:18.000Z" title="发表于 2022-03-15 09:25:18">2022-03-15</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/bb608df3.html" title="目标检测 | RetinaNet，经典单阶段Anchor-Based目标检测模型"><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20220314113659.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="目标检测 | RetinaNet，经典单阶段Anchor-Based目标检测模型"></a><div class="content"><a class="title" href="/posts/bb608df3.html" title="目标检测 | RetinaNet，经典单阶段Anchor-Based目标检测模型">目标检测 | RetinaNet，经典单阶段Anchor-Based目标检测模型</a><time datetime="2022-03-14T03:26:21.000Z" title="发表于 2022-03-14 11:26:21">2022-03-14</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/fc798de3.html" title="目标检测 | Faster R-CNN，经典两阶段检测模型"><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/20220312220823.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="目标检测 | Faster R-CNN，经典两阶段检测模型"></a><div class="content"><a class="title" href="/posts/fc798de3.html" title="目标检测 | Faster R-CNN，经典两阶段检测模型">目标检测 | Faster R-CNN，经典两阶段检测模型</a><time datetime="2022-03-12T13:59:01.000Z" title="发表于 2022-03-12 21:59:01">2022-03-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/d150f284.html" title="深度学习 | 小样本学习基础概念"><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/202201271037441.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="深度学习 | 小样本学习基础概念"></a><div class="content"><a class="title" href="/posts/d150f284.html" title="深度学习 | 小样本学习基础概念">深度学习 | 小样本学习基础概念</a><time datetime="2022-01-27T02:24:38.000Z" title="发表于 2022-01-27 10:24:38">2022-01-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/e05a9ab6.html" title="Jupyter Lab | 安装、配置、插件推荐、多用户使用教程"><img src="" data-lazy-src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/image-20211125175041150.png" onerror='this.onerror=null,this.src="/img/404.jpg"' alt="Jupyter Lab | 安装、配置、插件推荐、多用户使用教程"></a><div class="content"><a class="title" href="/posts/e05a9ab6.html" title="Jupyter Lab | 安装、配置、插件推荐、多用户使用教程">Jupyter Lab | 安装、配置、插件推荐、多用户使用教程</a><time datetime="2021-11-25T09:38:43.000Z" title="发表于 2021-11-25 17:38:43">2021-11-25</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div id="footer_deal"><a class="social-icon" href="mailto:865717150@qq.com" target="_blank" title="Email" rel="external nofollow noopener noreferrer"><i class="fas fa-envelope"></i></a><a class="social-icon" href="https://blog.csdn.net/qq_43701912" target="_blank" title="CSDN" rel="external nofollow noopener noreferrer"><i class="iconfont icon-csdn1"></i></a><a class="social-icon" href="https://github.com/Justlovesmile" target="_blank" title="Github" rel="external nofollow noopener noreferrer"><i class="fab fa-github"></i></a><a class="social-icon" href="https://weibo.com/u/5252319712" target="_blank" title="微博" rel="external nofollow noopener noreferrer"><i class="fa fa-weibo"></i></a><a class="social-icon" href="https://space.bilibili.com/168738824" target="_blank" title="Bilibili" rel="external nofollow noopener noreferrer"><i class="fas iconfont icon-bilibili"></i></a></div><div id="mj-footer"><div class="footer-group"><h3 class="footer-title">关于</h3><div class="footer-links"><a class="footer-item" target="_blank" rel="external nofollow noopener noreferrer" href="https://www.justlovesmile.top/">个人主页</a><a class="footer-item" href="/donate/">赞赏博主</a><a class="footer-item" href="/update/">博客日志</a><a class="footer-item" href="/charts/">博客统计</a></div></div><div class="footer-group"><h3 class="footer-title">归档</h3><div class="footer-links"><a class="footer-item" href="/archives/">文章归档</a><a class="footer-item" href="/tags/">全部标签</a><a class="footer-item" href="/categories/">全部分类</a><a class="footer-item" href="/random/">随机文章</a></div></div><div class="footer-group"><h3 class="footer-title">导航</h3><div class="footer-links"><a class="footer-item" href="/guestbook/">博客留言</a><a class="footer-item" href="/friends/">友情链接</a><a class="footer-item" href="/fcircle/">友链订阅</a><a class="footer-item" href="/atom.xml">RSS订阅</a></div></div><div class="footer-group"><h3 class="footer-title">协议</h3><div class="footer-links"><a class="footer-item" href="/privacy/">隐私协议</a><a class="footer-item" href="/cookies/">Cookies</a><a class="footer-item" href="/cc/">版权协议</a></div></div></div><div id="footer-banner"><div class="footer-banner-links"><div class="footer-banner-left"><div id="footer-banner-tips">©2019 - 2022 By Justlovesmile</div></div><div class="footer-banner-right"><a class="footer-banner-link" target="_blank" rel="external nofollow noopener noreferrer" href="http://beian.miit.gov.cn/">蜀ICP备20004960号</a><a class="footer-banner-link" href="/update/">主题</a><a class="footer-banner-link" href="/about/">关于</a></div></div></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">本地搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i> <span>数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"></div></div><hr><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script defer="defer" src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script><script defer="defer" src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script defer="defer" src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script defer="defer" src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script defer="defer" src="/js/search/local-search.js"></script><div class="js-pjax"><script>(()=>{const t=()=>{twikoo.init(Object.assign({el:"#twikoo-wrap",envId:"blog-comment-3gt33nkmf9f97e6e",region:"ap-shanghai",onCommentLoaded:function(){btf.loadLightbox(document.querySelectorAll("#twikoo .tk-content img:not(.vemoji)"))}},null))},o=()=>{"object"!=typeof twikoo?getScript("https://cdn.jsdelivr.net/npm/twikoo/dist/twikoo.all.min.js").then(t):setTimeout(t,0)};btf.loadComment(document.getElementById("twikoo-wrap"),o)})()</script></div><canvas id="universe"></canvas><script defer="defer">console.log("\n %c 欢迎来到Justlovesmile の Blog %c https://github.com/Justlovesmile %c https://blog.justlovesmile.top \n","color: #f9ed69; background: #252a34; padding:5px 0;","background: #3fc1c9; padding:5px 0;","background: #3fc1c9; padding:5px 0;")</script><script defer="defer" src="/js/rgbaster.min.js"></script><script defer="defer" src="/js/justlovesmile.js"></script><script>window.addEventListener("load",async()=>{navigator.serviceWorker.register("/js/sw-cdn.js?time="+(new Date).getTime()).then(async e=>{"true"!=window.localStorage.getItem("install")&&(window.localStorage.setItem("install","true"),setTimeout(()=>{window.location.search="?time="+(new Date).getTime()},1e3))}).catch(e=>{console.log("sw-cdn.js error")})})</script></div></body></html>